{template 'web/common/header'}

<body>
    <style>
        * {
            -webkit-box-sizing: initial;
            -moz-box-sizing: initial;
            box-sizing: initial;
        }

        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }

        .layui-input-required {
            color: #ff0000;
            font-weight: 800;
        }

        .layui-anim-upbit .switch:before {
            background: none !important;
        }

        .layui-anim-upbit .switch:after {
            background: none !important;
            height: inherit;
            width: inherit;
            border: 0;
            position: inherit;
            top: -4px;
        }

        .layui-treeSelect .ztree li span.button.switch {
            top: -6px;
        }
    </style>
    <form class="layui-form" action="" lay-filter="component-form-group">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header">基本信息</div>
                <div class="layui-card-body" style="padding: 15px;">

                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="layui-input-required">*</span>入库单号</label>
                        <div class="layui-input-block">
                            <input type="text" name="record" lay-verify="required" placeholder="请填写入库单号" class="layui-input"
                                value="{$record}">
                        </div>
                    </div>

                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">入库日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="record_date" placeholder="请填写入库日期" class="layui-input" id="record_date"
                                    lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class=" layui-form-label">入库类型</label>
                            <div class="layui-input-inline">
                                <select name="record_type" lay-verify="required">
                                    <option value="">请选择入库类型</option>
                                    <option value="1">销售退货</option>
                                    <option value="2">其他入库</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="layui-input-required">*</span>仓库</label>
                            <div class="layui-input-inline">
                                <select name="storage_id" lay-verify="required">
                                    <option value="">请选择一个仓库</option>
                                    {loop $storage $key $val}
                                    <option value="{$val['id']}">{$val['sname']}</option>
                                    {/loop}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class=" layui-form-label">经办人</label>
                            <div class="layui-input-inline">
                                <input type="text" name="transactor" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class=" layui-form-label">制单人</label>
                            <div class="layui-input-inline">
                                <input type="text" name="originator" class="layui-input layui-disabled" value="{$_W['username']}"
                                    disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class=" layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <input type="text" name="remark" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header">商品添加</div>
                <div class="layui-card-body" style="padding: 15px;">
                    <div class="layui-btn" id="addGoods" style="margin:10px 0px;">添加商品</div>
                    <div id="inTable" lay-filter="inTable"></div>
                    <script type="text/html" id="table_tool">
                            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>

    <script src="../addons/xn_erp/images/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../addons/xn_erp/images/layuiadmin/layui/extend/'
        }).use(['table', 'form', 'jquery', 'tableSelect', 'laypage', 'laydate'], function () {
            var table = layui.table, form = layui.table, $ = layui.$, form = layui.form, tableSelect = layui.tableSelect, laypage = layui.laypage, laydate = layui.laydate;
            laydate.render({
                elem: '#record_date' ,type: 'datetime', value: new Date()
            });
            var inTable = table.render({
                elem: '#inTable',
                height: 480,
                data: [],
                page: {},
                text: { none: '请添加要入库的商品' },
                cols: [[
                    { field: 'number', title: '商品编码', width: 100, fixed: true },
                    { field: 'name', title: '商品名称', minWidth: 200 },
                    { field: 'snumber', edit: true, title: '入库数量', width: 100, align: 'center', templet: '<div>{{# if(d.snumber){}}{{d.snumber}}{{# }else{}}<i class="layui-icon layui-icon-edit"></i>{{#}}}</div>' },
                    { field: 'unit_name', title: '单位', align: 'center', width: 60 },
                    { field: 'remark', edit: true, title: '备注', templet: '<div>{{# if(d.remark){}}{{d.remark}}{{# }else{}}<i class="layui-icon layui-icon-edit"></i>{{#}}}</div>' },
                    { toolbar: '#table_tool', title: '操作', fixed: 'right', align: 'center', width: 120 }
                ]],

            });
            // 工具监听
            table.on('tool(inTable)', function (obj) {
                switch (obj.event) {
                    case 'del':
                        var config = inTable.config;
                        var dataTemp = config.data;
                        var page = config.page;
                        // 得到tr的data-index
                        var trElem = obj.tr.first();
                        var index = trElem.data('index');
                        // 计算出在data中的index
                        var dataIndex = index + page.limit * (page.curr - 1);
                        // 删除对应下标的数据
                        dataTemp.splice(dataIndex, 1);
                        // 新的页数
                        var pageNew = Math.ceil(dataTemp.length / page.limit);
                        // 重新接收reload返回的对象，这个很重要
                        inTable = table.reload(config.id, $.extend(true, {
                            // 更新数据
                            data: dataTemp
                        }, config.page ? {
                            // 如果删除了数据之后页数变了，打开前一页
                            page: {
                                curr: page.curr > pageNew ? ((page.curr - 1) || 1) : page.curr
                            }
                        } : {}));
                        break;
                    default:
                        break;
                }
            });
            // 新增
            $('#addGoods').click(function () {
                index = layer.open({
                    type: 1
                    , title: '商品选择'
                    , area: ['60%', '40%']
                    , content: '<div style="padding:0 10px;"><table id="goods" lay-filter="goods"></table></div>'
                    , success: function () {
                        goTable = table.render({
                            elem: '#goods'
                            , url: "{$url}&api=goods"
                            , title: '商品列表'
                            , cols: [[
                                { type: 'checkbox', fixed: 'left' }
                                , { field: 'number', title: '编号', width: 150 }
                                , { field: 'name', title: '商品名称' }
                                , { field: 'unit_name', title: '单位', width: 60 }
                            ]]
                            , page: true
                            , done: function (res, curr, count) {
                                var ids = [];
                                gdata = res.data;
                                config = goTable.config;
                                var idata = inTable.config.data;
                                idata.forEach(function (v, i) {
                                    ids.push(v["id"]);
                                });
                                gdata.forEach(function (v, i) {
                                    if (ids.indexOf(v["id"]) > -1) {
                                        $('.layui-table-fixed-l tr[data-index=' + i + '] input[type="checkbox"]').prop('checked', true);
                                        $('.layui-table-fixed-l tr[data-index=' + i + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                    }
                                });
                                var checkStatus = table.checkStatus('goods');

                                if (checkStatus.isAll) {
                                    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                                    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                                }
                            }
                            , limit: 8

                        });
                    }
                    , btn: ['完成']
                });

            });

            table.on('checkbox(goods)', function (obj) {

                var gdata = obj.data;
                var config = inTable.config;
                var idata = config.data;
                var iids = [];
                idata.forEach(v => { iids.push(v['id']); });
                if (obj.type == 'one') {
                    if (obj.checked == true) {
                        if (iids.indexOf(gdata['id']) == -1) { idata.push(gdata); }
                    } else {
                        idata.forEach(function (v, i) {
                            if (v['id'] == gdata['id']) { idata.splice(i, 1); }
                        });
                    }
                } else {

                }

                inTable = table.reload(config.id, $.extend(true, {
                    data: idata,
                }, config.page ? {
                    page: {
                        curr: Math.ceil(idata.length / config.page.limit)
                    }
                } : {}));

            });
            table.on('edit(inTable)', function (obj) {
                if (obj.value == 0 || obj.value == '') {
                    layer.msg('请添加商品个数', { icon: 5, anim: 6 });
                    $('div[lay-id="inTable"]').css("border-color", "#f00");
                } else {
                    $('div[lay-id="inTable"]').css("border-color", "#e6e6e6");
                }
            });
            //监听提交
            form.on('submit(component-form)', function (data) {
                var url = "{$url}&api=add";
                var goods = inTable.config.data;
                data.field['goods'] = goods;
                if (goods.length == 0) {
                    layer.msg('请添加商品后提交！', { icon: 5, anim: 6 });
                    $('div[lay-id="inTable"]').css("border-color", "#f00");
                    return false;
                }
                goods.forEach(e => {
                    if (e['snumber'] == 0 || e['snumber'] == '') {
                        layer.msg('请添加商品个数', { icon: 5, anim: 6 });
                        $('div[lay-id="inTable"]').css("border-color", "#f00");
                        return false;
                    }
                });
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data.field,
                    success: function (result) {
                        layer.alert(result, function (index) {
                            layer.close(index);
                            parent.layui.admin.closeThisTabs();
                        });
                    },
                    error: function (result) {
                        console.log(result);
                    }
                })
                return false;
            });

        });



    </script>
</body>


</html>